<template>
	<view class="body">
		<xk-header title="看房登记"></xk-header>
		<scroll-view scroll-x="true" class="scroll">
			<view :class="lookRoomData.pi_looking_property_dets.length == 1 ? 'scroll-one' : 'scroll-x'">
				<view v-for="(item, index) of lookRoomData.pi_looking_property_dets" :key="index" class="data-item">
					<view class="item-top">
						<view>物业编号: {{item.property_code}}</view>
						<view style="font-size: 28rpx; color: #2C72FF;"><uni-icons style="margin-right: 20rpx;" color="#2C72FF" type="eye"></uni-icons>{{item.company_look_num}}次</view>
					</view>
					<view class="item-middel">
						<image v-if="item.property_image" mode="aspectFill" class="img" :src="item.property_image | formatImgPath('200', '150')"/>
						<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')"/>
						<view class="info">
							<view class="top">
								<view class="name">{{item.tag_name || "未知"}}</view>
								<view class="desc">{{item.floor_area}}㎡/{{item.storey}}层/{{item.building}}楼</view>
								<view class="amount">{{(item.pricing_amount * item.floor_area || "") | formatMoneyNo00}}元/月</view>
							</view>
						</view>
					</view>
					<view class="location-view">
						<image mode="aspectFill" class="dingwei" :src="(imgUrl+'/wx/dingwei.png')"/>
						<view class="address">{{item.storey}}层/{{item.building}}楼</view>
						<!-- <view class="address">广州市黄埔区伴河路广州莱迪创新科技园西侧步行约140米科信纳米谷产业园</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="list">
			<view class="list-item header" @click="more = !more">
				<view><view class="header-icon"></view>申请信息</view>
				<image v-if="!more" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else  :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="more">
				<view class="list-item">
					<view>申请单号：{{lookRoomData.apply_no}}</view>
				</view>
				<view class="list-item">
					<view>申请人：{{lookRoomData.apply_user_name}}<text style="color: #2C72FF; margin-left: 40rpx;">(预约{{lookRoomData.company_look_num}}次)</text></view>
				</view>
				<view class="list-item">
					<view>联系号码：{{lookRoomData.contact_phone}}</view>
				</view>
				<view class="list-item">
					<view>单位名称：{{lookRoomData.company_name}}</view>
				</view>
				<view class="list-item">
					<view>租赁用途：{{lookRoomData.lease_purpose}}</view>
				</view>
				<view class="list-item">
					<view>接待时间：{{lookRoomData.accept_starttime || '暂无接待时间' }}</view>
				</view>
				<view class="list-item">
					<view>受理结果：{{lookRoomData.accept_result == '10' ? '同意' : '拒绝'}}</view>
				</view>
				<view class="list-item">
					<view>受理意见：{{lookRoomData.accept_remark || '无'}}</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-item header" @click="formMore = !formMore">
				<view><view class="header-icon"></view>登记信息</view>
				<image v-if="!formMore" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else  :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="formMore">
				<picker mode="date" :value="formData.check_businessdate" @change="dateChange">
					<view class="list-item">
						<view>看房时间<text class="com-req"></text>：</view>
						<view :class="formData.check_businessdate ? 'right-title1' : 'right-title1 right-title1-empty'">{{formData.check_businessdate ? formData.check_businessdate : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')"/>
					</view>
				</picker>
				<picker :range="chanceArray" range-key="label" :value="formData.is_intention" @change="chanceChange">
					<view class="list-item">
						<view>是否有意向<text class="com-req"></text>：</view>
						<view class="right-title1">{{chanceArray[formData.is_intention].label}}</view>
						<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')"/>
					</view>
				</picker>
				<picker v-if="formData.is_intention" :range="propertyDecArray" range-key="label" :value="propertyDecIndex" @change="propertyDecChange">
					<view class="list-item">
						<view>物业情况<text class="com-req"></text>：</view>
						<view v-if="propertyDecArray.length > 0" class="right-title1">{{propertyDecArray[propertyDecIndex].label}}</view>
						<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')"/>
					</view>
				</picker>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>需维修部位：</view>
					<textarea v-model="formData.need_repair" placeholder="请输入需维修部位" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>租赁用途：</view>
					<input v-model="formData.purpose" class="input-item" placeholder="请输入租赁用途" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>意向租赁面积(㎡)<text class="com-req"></text>：</view>
					<input v-model="formData.intent_area" type="digit" class="input-item" placeholder="请输入客户意向租赁面积" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>意向价格(元/㎡)<text class="com-req"></text>：</view>
					<input v-model="formData.intent_price" type="digit" class="input-item" placeholder="请输入客户意向价格" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item">
					<view>车位要求：</view>
					<input v-model="formData.intent_parking" class="input-item" placeholder="请输入客户车位要求" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>环境要求：</view>
					<textarea v-model="formData.intent_environment" placeholder="在此输入客户环境要求" placeholder-class="placeholder"/>
				</view>
				<view v-if="formData.is_intention" class="list-item textarea">
					<view>其它要求：</view>
					<textarea v-model="formData.company_claim" placeholder="在此输入其它要求" placeholder-class="placeholder"/>
				</view>
				<view class="list-item textarea">
					<view>客户反馈<text v-if="!formData.is_intention" class="com-req"></text>：</view>
					<textarea v-model="formData.register_remark" placeholder="在此输入客户反馈" placeholder-class="placeholder"/>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn" @click="doneSubmit">立即登记</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				lookRoomData: {
					pi_looking_property_dets: []
				},
				more: true,
				formMore: true,
				chanceArray:[{value: 0, label: '否'}, {value: 1, label: '是'}],
				propertyDecArray:[],
				propertyDecIndex: 0,
				formData: {
					look_id: '',
					check_businessdate: '',
					is_intention: 1,
					property_dec: '',
					need_repair: '',
					purpose: '',
					company_claim: '',
					intent_area: '',
					intent_price: '',
					intent_parking: '',
					intent_environment: '',
					register_remark: '',
					isSubmit: true
				}
			};
		},
		onLoad(options){
			this.formData.look_id = options.lookId;
			this.formData.check_businessdate = this.$util.getDate();
			this.getLookRoomData()
		},
		methods:{
			getLookRoomData(){
				this.$api.baseData_getToolDataList({code: 'PI_LOOKING_ROOM_PROPERTYDEC' + "_nostr"}).then((res)=>{
					console.log('2222===',res)
					for(let item of res){
						this.propertyDecArray.push({
							value: item.data_value,
							label: item.data_text
						})
					}
					this.formData.property_dec = 0
				})
				this.$api.baseData_getPiLookingRoom(this.formData.look_id).then((res)=>{
					this.lookRoomData = res.piLookingRoom
				})
			},
			chanceChange(e){
				this.formData.is_intention = e.detail.value
			},
			propertyDecChange(e){
				this.propertyDecIndex = e.detail.value
			},
			dateChange(e){
				this.formData.check_businessdate = e.detail.value
			},
			doneSubmit(){
				if(this.formData.is_intention == 1){
					// if(!this.formData.property_dec){
					// 	this.$util.toast('请输入物业情况')
					// 	return
					// }
					this.formData.property_dec = this.propertyDecArray[this.propertyDecIndex].value
					if(!this.formData.purpose){
						this.$util.toast('请输入客户租赁用途')
						return
					}
					if(!this.formData.intent_area){
						this.$util.toast('请输入客户意向租赁面积')
						return
					}
					if(!this.formData.intent_price){
						this.$util.toast('请输入客户意向价格')
						return
					}
				}
				if(this.formData.is_intention == '0' && !this.formData.register_remark){
					this.$util.toast('请输入客户反馈')
					return
				}
				if(this.formData.is_intention == '0'){
					this.formData.intent_area = '0'
					this.formData.intent_price = '0'
				}
				this.$util.confirm({
					content: "确认要提登记信息？",
					confirmText: "提交"
				}).then(isConfirm => {
					if (isConfirm) {
						this.$util.post({
							url: "app/piLookingRoom/register",
							data: this.formData
						}).then((res)=>{
							uni.redirectTo({
								url:'/pagesA/check-house/check-house-finish?type=done'
							})
						});
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
.scroll{
	.scroll-x{
		display: inline-flex;
		padding-right: 30rpx;
	}
	.scroll-one{
		.data-item{
			width: 650rpx !important;
		}
	}
}
.data-item {
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 0rpx 0rpx 30rpx;
	padding: 20rpx;
	color: #333;
	font-size: 28rpx;
	white-space: normal;
	width: 550rpx;
	.item-top {
		display: flex;
		:first-child {
			flex: 1;
		}
		.del-img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item-middel {
		display: flex;
		margin-top: 10rpx;

		.img{
			width: 200rpx;
			height: 150rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.info{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top{
				.name{
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333;
				}
				.desc{
					font-size: 28rpx;
					color: #999999;
				}
				.amount{
					font-size: 36rpx;
					font-weight: bolder;
					color: #FF3737;
				}
			}
		}
	}
	.location-view {
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
		border-top: 1px solid #EEEEEE;
		padding-top: 10rpx;
		.dingwei {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
		}
		.address {
			font-size: 24rpx;
			color: #333;
			margin-left: 10rpx;
		}
	}
}

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		> view:first-child {
			color: #333333;
		}
		.input-item {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}
		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.textarea{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		textarea{
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.list-item2{
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;
		:first-child {
			width: 150rpx;
		}
	}
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		padding: 30rpx 20rpx  30rpx 0;

		> view:first-child {
			flex: 1;
			display: flex;
			align-items: center;
			color: #333333;
			.header-icon{
				height: 40rpx;
				width: 12rpx;
				border-top-right-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
				background-color: #2C72FF;
				margin-right: 10rpx;
			}
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.btn-view {
	display: flex;
	justify-content: space-around;
	.btn {
		width: 290rpx;
		height: 88rpx;
	}
}
</style>
